<template>
  <div class="os-detail">
    <div class="os-detail-area">
      <!-- 左 -->
      <div class="detail-left" style="width: 60%">
        <!-- 单个系统开始 -->
        <div class="list" @click="dd">
          <div class="left"><img src="" alt=""></div>
          <div class="middle">
            <div class="title">天择可付收银系统</div>
            <div class="tip">支持第三方平台聚合收银，花呗分期收银，刷脸支付，信用收银，预授权。通过深化支付后营销，打造全行业智慧经营</div>
            <div>评价： <a-rate :defaultValue="2" disabled /></div>
          </div>
          <!-- 已订购 -->
          <div>已订购：<a-tag color="green">标准版</a-tag></div>
        </div>
        <div class="sel-size">
          <!-- 应用规格 -->
          <div>
            <span class="name">应用规格：</span> 
            <a-radio-group defaultValue="a" buttonStyle="solid">
              <a-radio-button value="a">标准版</a-radio-button>
              <a-radio-button value="b">高级版</a-radio-button>
              <a-radio-button value="c">自定义版</a-radio-button>
            </a-radio-group>
          </div>
          <div class="size-tip">支持支付宝微信聚合收银、银行卡刷卡，预授权收银</div>
          <!-- 服务周期 -->
          <div> 
            <span class="name">服务周期：</span>
            <a-radio-group defaultValue="a" buttonStyle="solid">
              <a-radio-button value="a">长期</a-radio-button>
            </a-radio-group>
          </div>
          <!-- 价格 -->
          <div>
            <span class="name">价 格：</span>
            <span class="size-price">12880.00</span>
          </div>
          <!-- 立即订购 -->
          <div class="btn-group">
            <a-button style="margin-right:15px">预约电话咨询</a-button>
            <a-button 
              style="margin-right:15px;background:#FFBC00;color:#fff"
              @click="handleEvaluation"
            >立即评价</a-button>
            <a-button type="primary" @click="showModal">{{0 === 1? '立即订购': '升级服务' }}</a-button>
          </div>
        </div>
      </div>
      <!-- 右 商家评价 -->
      <div class="detail-right" style="width: 39.5%">
        <!-- 卡片 -->
        <a-card title="商家评价" :bordered="false" style="width: 100%">
          <a-list
            itemLayout="horizontal"
            :dataSource="data"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <a-list-item-meta
                description="Ant Design, a design language for backgroun Team"
              >
                <div slot="title">
                   <a-avatar style="width:25px;height:25px" slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                    <span style="margin: 0 15px 0 5px">{{item.title}}</span> 
                    <a-rate :defaultValue="2" disabled />
                </div>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </a-card>
        <!-- 分页 -->
        <div class="pageone">
          <a-pagination size="small" :total="50"  showQuickJumper />
        </div>
      </div>
    </div>
    <!-- 服务详情 -->
    <div class="server">
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane tab="服务详情" key="1">Content of Tab Pane 1</a-tab-pane>
        <a-tab-pane tab="使用教程" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>
      </a-tabs>
    </div>
    <!-- 立即订购弹窗 -->
    <a-modal
      title="自定义版功能包选择"
      v-model="visible"
      @ok="handleOk"
      cancelText="取消"
      okText="确定"
      width="800px"
    >
      <main-topic></main-topic>
      <main-list></main-list>
    </a-modal>
    <!-- 立即评价 -->
    <a-modal
      title="评价服务"
      v-model="isEvaluation"
      @ok="handleOk"
      cancelText="取消"
      okText="确定"
      width="800px"
    >
      <main-topic></main-topic>
      <!-- 评价 -->
      <div>
          评价：<a-rate :defaultValue="2" disabled />
      </div>
      <!-- 评价内容 -->
      <div>
        <div class="eavlut-content">评价内容：</div>
        <div><a-textarea placeholder="请点击此处，填写评价内容" :autosize="{ minRows: 2, maxRows: 6 }" /></div>
      </div>
      <div style="margin:16px 0">其他：<a-checkbox @change="onChange">匿名评价</a-checkbox></div>
    </a-modal>
  </div>
</template>
<script>
import MainTopic from './component/MainTopic'
import MainList from './component/MainList'
export default {
  components: {
    MainTopic,
    MainList
  },
  data() {
    return {
      visible: false,
      isEvaluation: false,
      data : [
  {
    title: 'Ant1'
  },
  {
    title: 'Ant2'
  },
  {
    title: 'Ant3'
  }]
    }
  },
  methods: {
    dd() {},
    callback() {},
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      window.window.console.log(e);
      this.visible = false
    },
    handleEvaluation() {
      this.isEvaluation = true
    }
  }
}
</script>
<style lang="less" scoped>
  .os-detail {
    color: #333333;
    &-area {
      display: flex;
      justify-content: space-between;
      // border: 1px solid red;
      .detail-left {
        background: #ffffff;
        padding: 25px 20px 20px 20px;
        box-sizing: border-box;
        height: 405px;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
        border-radius: 5px;
        .list {
          display: flex;
          padding-bottom: 20px;
          border-bottom: 1px solid #E7E7E7;
          box-sizing: border-box;
          .left {
            width: 50px;
            height: 50px;
            border: 1px solid red;
            margin-right: 20px;
          }
          .middle {
            .title {
              font-size: 22px;
            }
            .tip {
              width: 538px;
              color: #666666;
              margin: 7px 0 ;
            }
          }
        }
        .sel-size {
          margin-top:20px;
          .name {
            display: inline-block;
            width: 80px;
          }
          .size-price {
            color: #F75800;
            font-size: 30px;
            &::before {
              display: inline-block;
              content: '￥';
              font-size: 14px;
            }
          }
          .size-tip {
            color: #666666;
            margin: 8px 0 15px 80px;
          }
          .btn-group {
            text-align: right;
            margin-top: 17px;
          }
        }
      }
      .detail-right {
        height: 405px;
        background: #ffffff;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06);
        border-radius: 5px;
        .ant-card-body {
          color: red!important;
        }
        .pageone {
          text-align:center;
          margin-top:10px;
        }
      }
    }
    .server {
      background: #ffffff;
      padding: 0 20px;
      box-sizing: border-box;
    }
  }
  .eavlut-content {
    margin: 17px 0 10px 0;
  }
</style>